<template>
    <Row class="page3">
        <Col style="width:26%;">
        <div class="left">
            <audio src="@/assets/李旭昊 - 钢铁洪流进行曲.mp3" autoplay="autoplay" loop="loop" ref="MusicPlay"></audio>
            <span class='title'><span class="title-text">国庆景点推荐</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div class="left1" style="height:50%;">
                <div style="height:65%;">
                    <channel-bar id="left_1" title="部分省份景点推荐" :data="data1" ref="channelBar1"></channel-bar>
                    <distribution-solider id="left_2" :data="data2" ref="distributionSolider1"></distribution-solider>
                </div>
                <div style="height: 35%;display: flex">
                    <div style="height: 100%; width: 33.33%;">
                        <pie ref="chart3" id="pie_1" :data="pieData1"></pie>
                    </div>
                    <div style="height: 100%; width: 33.33%;">
                        <pie ref="chart3" id="pie_3" :data="pieData2"></pie>
                    </div>
                    <div style="height: 100%; width: 33.33%;">
                        <pie ref="chart3" id="pie_2" :data="pieData3"></pie>
                    </div>
                </div>
            </div>
            <div class="left1" style="height:28%;">
                <red-pocket ref="redPocket"></red-pocket>
            </div>
            <div style="height:22%;">
                <div style="height:100%;">
                    <channel-bar id="left_5" title="出行时间段分析" :data="data3" ref="channelBar2"></channel-bar>
                    <distribution-solider id="left_6" :data="data4" ref="distributionSolider2"></distribution-solider>
                </div>
            </div>
        </div>
        </Col>
        <Col style="width:48%;padding:0 1%;">
        <div class="center-top">
            <china-map ref="chinaMap"></china-map>
        </div>
        <div class="center-bottom">
            <span class='title'><span class="title-text">AAA学员薪资分析</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <Row class="bottom-radars">
                <Col span="6">
                <radar id='bottom_1_1' :data=data5 ref="chart1"></radar>
                </Col>
                <Col span="6">
                <radar id='bottom_1_2' :data=data6 ref="chart2"></radar>
                </Col>
                <Col span="6">
                <radar id='bottom_1_3' :data=data7 ref="chart3"></radar>
                </Col>
                <Col span="6">
                <radar id='bottom_1_4' :data=data8 ref="chart4"></radar>
                </Col>
            </Row>
            <Row class="bottom-bars">
                <Col span="6">
                <double-bar id="bottom_2_1" :data="data9" ref="chart5"></double-bar>
                </Col>
                <Col span="6">
                <double-bar id="bottom_2_2" :data="data10" ref="chart6"></double-bar>
                </Col>
                <Col span="6">
                <double-bar id="bottom_2_3" :data="data11" ref="chart7"></double-bar>
                </Col>
                <Col span="6">
                <double-bar id="bottom_2_4" :data="data12" ref="chart8"></double-bar>
                </Col>
            </Row>
        </div>
        </Col>
        <Col style="width:26%">
        <div class="right-1">
            <div class="right1-1">
                <span class='title'><span class="title-text">国民聚焦</span></span>
                <span class="angle1"></span>
                <span class="angle2"></span>
                <span class="angle3"></span>
                <span class="angle4"></span>
                <webcasts-risk ref='webcastsRisk'></webcasts-risk>
            </div>
        </div>
        <div class="right-1">
            <div class="right1-1">
                <span class='title'><span class="title-text">人均GDP</span></span>
                <span class="angle1"></span>
                <span class="angle2"></span>
                <span class="angle3"></span>
                <span class="angle4"></span>
                <device-safe-risk ref='deviceSafeRisk'></device-safe-risk>
            </div>
        </div>
        <div class="right-2">
            <div class="right1-1">
                <span class='title'><span class="title-text">部分国家国庆日介绍</span></span>
                <span class="angle1"></span>
                <span class="angle2"></span>
                <span class="angle3"></span>
                <span class="angle4"></span>
                <div class="circular">
                    <div class="canvas">
                        <div class="subtitle">国人心声</div>
                        <div class="canvasList">
                            <double-ring id='canvas_1' title="富强民主" color='#00CCFF' ref="ring1"></double-ring>
                            <double-ring id='canvas_2' title="文明和谐" color='#EDCE43' ref="ring2"></double-ring>
                            <double-ring id='canvas_3' title="公正法治" color='#F83552' ref="ring3"></double-ring>
                        </div>
                    </div>
                    <!-- <hot-words ref="hotWords"></hot-words> -->
                    <div class="tetx">
                        <span>古巴：全国解放日（Day of the National Liberation of Cuba）1月1日</span><br>
                        <span>苏丹：独立日（Sudan Independence Day of Sudan）1月1日</span><br>
                        <span>缅甸：独立日（Independence Day of Myanmar）1月4日</span><br>
                        <span>澳大利亚：澳大利亚日（Australia Day）1月26日</span><br>
                        <span>印度：共和日（Republic Day of India）1月26日</span><br>
                        <span>斯里兰卡：独立和国庆日（Independence and National Day of Sri Lanka）2月4日</span><br>
                        <span>新西兰：国庆日（Waitangi Day of New Zealand）2月6日</span><br>
                    </div>
                </div>
            </div>
        </div>
        </Col>
    </Row>
</template>

<script>
const chinaMap = () => import('./components/page3/chinaMap');
const channelBar = () => import('./components/page3/channelBar');
const distributionSolider = () => import('./components/page3/distributionSolider');
const pie = () => import('./components/pie');
const redPocket = () => import('./components/page3/redPocket');
const radar = () => import('./components/radar');
const doubleBar = () => import('./components/page3/doubleBar');
const webcastsRisk = () => import('./components/page3/webcastsRisk');
const deviceSafeRisk = () => import('./components/page3/deviceSafeRisk');
const doubleRing = () => import('./components/page3/doubleRing');

export default {
    name: 'page3',
    components: {
        chinaMap,
        channelBar,
        distributionSolider,
        pie,
        redPocket,
        radar,
        doubleBar,
        webcastsRisk,
        deviceSafeRisk,
        doubleRing,
    },
    data() {
        return {
            data1: [
                {
                    subtitle: '旅游人数占比 45%',
                    top: '20%',
                    data: { name: "北京", value: 45, color: '#0E4CFF' },
                },
                {
                    subtitle: '旅游人数占比 24%',
                    top: '36%',
                    data: { name: "河南", value: 24, color: '#FF6600' },
                },
                {
                    subtitle: '旅游人数占比 21%',
                    top: '53%',
                    data: { name: "陕西", value: 21, color: '#7F05FD' }
                },
                {
                    subtitle: '旅游人数占比 12%',
                    top: '69%',
                    data: { name: "重庆", value: 12, color: '#FE9900' },
                },
                {
                    subtitle: '旅游人数占比 2.8%',
                    top: '85%',
                    data: { name: "内蒙古", value: 2.8, color: '#B405FD' },
                },
            ],
            data3: [
                {
                    subtitle: '出行占比 45%',
                    top: '29%',
                    data: { name: "1～2日", value: 45, color: '#0E4CFF' },
                },
                {
                    subtitle: '出行占比 60%',
                    top: '54%',
                    data: { name: "3～4日", value: 60, color: '#FE9900' },
                },
                {
                    subtitle: '出行占比 12%',
                    top: '78%',
                    data: { name: "5～6日", value: 12, color: '#7F05FD' },
                },
            ],
            data2: [ // 部分省市景点推荐
                {
                    top: '16%',
                    color: '14,73,245',
                    data: [
                        { name: '天安门', value: 10 },
                        { name: '故宫', value: 9 },
                        { name: '长城', value: 8 },
                        { name: '前门大街', value: 7 },
                        { name: '南锣鼓巷', value: 6 },
                        { name: '天坛', value: 5 },
                        { name: '颐和园', value: 4 },
                        { name: '圆明园', value: 3 },
                        { name: '大学', value: 2 },
                        { name: '草桥', value: 1 },
                    ],
                },
                {
                    top: '34%',
                    color: '170,6,243',
                    data: [
                        { name: '老君山', value: 10 },
                        { name: '龙门石窟', value: 9 },
                        { name: '云台山', value: 8 },
                        { name: '少林寺', value: 7 },
                        { name: '林州大峡谷', value: 6 },
                        { name: '芒砀山', value: 5 },
                        { name: '清明上河园', value: 4 },
                        { name: '殷墟', value: 3 },
                        { name: '尧山', value: 2 },
                        { name: '嵖岈山', value: 1 },
                    ],
                },
                {
                    top: '50%',
                    color: '254,153,0',
                    data: [
                        { name: '兵马俑', value: 10 },
                        { name: '华山', value: 9 },
                        { name: '法门寺', value: 8 },
                        { name: '黄帝陵', value: 7 },
                        { name: '太白山', value: 6 },
                        { name: '大雁塔', value: 5 },
                        { name: '乾陵', value: 4 },
                        { name: '大唐不夜城', value: 3 },
                        { name: '华清宫', value: 2 },
                        { name: '延安', value: 1 },
                    ],
                },
                {
                    top: '68%',
                    color: '255,102,0',
                    data: [
                        { name: '洪崖洞', value: 10 },
                        { name: '解放碑', value: 9 },
                        { name: '朝天门', value: 8 },
                        { name: '磁器口', value: 7 },
                        { name: '洋人街', value: 6 },
                        { name: '李子坝', value: 5 },
                        { name: '轻轨穿洞', value: 4 },
                        { name: '大足石刻', value: 3 },
                        { name: '白帝城', value: 2 },
                        { name: '喀斯特', value: 1 },
                    ],
                },
                {
                    top: '85%',
                    color: '127,5,253',
                    data: [
                        { name: '白塔寺', value: 10 },
                        { name: '巴丹湖', value: 9 },
                        { name: '怪树林', value: 8 },
                        { name: '黑水城', value: 7 },
                        { name: '胡杨林', value: 6 },
                        { name: '七彩镇', value: 5 },
                        { name: '海日出', value: 4 },
                        { name: '七彩丹霞', value: 3 },
                        { name: '白帝城', value: 2 },
                        { name: '喀斯特', value: 1 },
                    ],
                },
            ],
            data4: [
                {
                    top: '30%',
                    color: '14,73,245',
                    data: [
                        { name: '天安门', value: 10 },
                        { name: '故宫', value: 9 },
                        { name: '长城', value: 8 },
                        { name: '前门大街', value: 7 },
                        { name: '南锣鼓巷', value: 6 },
                        { name: '天坛', value: 5 },
                        { name: '颐和园', value: 4 },
                        { name: '圆明园', value: 3 },
                        { name: '大学', value: 2 },
                        { name: '草桥', value: 1 },
                    ],
                },
                {
                    top: '57%',
                    color: '254,153,0',
                    data: [
                        { name: '白塔寺', value: 10 },
                        { name: '巴丹湖', value: 9 },
                        { name: '怪树林', value: 8 },
                        { name: ' 黑水城遗址', value: 7 },
                        { name: '胡杨林', value: 6 },
                        { name: '七彩镇', value: 5 },
                        { name: ' 海日出', value: 4 },
                        { name: '七彩丹霞', value: 3 },
                        { name: '白帝城', value: 2 },
                        { name: '喀斯特', value: 1 },
                    ],
                },
                {
                    top: '83%',
                    color: '127,5,253',
                    data: [
                        { name: '兵马俑', value: 10 },
                        { name: '华山', value: 9 },
                        { name: '法门寺', value: 8 },
                        { name: '黄帝陵', value: 7 },
                        { name: '太白山', value: 6 },
                        { name: '大雁塔', value: 5 },
                        { name: '乾陵', value: 4 },
                        { name: '大唐不夜城', value: 3 },
                        { name: '华清宫', value: 2 },
                        { name: '延安', value: 1 },
                    ],
                },
            ],
            data5: {
                title: 'java',
                position: ['5%', '14%'],
                center: ['50%', '60%'],
                indicator: [
                    { text: ' 架构师' },
                    { text: 'WEB开发' },
                    { text: '数据分析师' },
                    { text: '数据挖掘师' },
                    { text: 'java开发' },
                    { text: '项目经理' },
                    { text: '大数据可视化工程师' }
                ],
                data: [
                    {
                        name: '岗位占比',
                        color: '#0DE4EE',
                        value: [4.5, 2.3, 9.1, 25, 9.1, 18.2, 29]
                    },
                ]
            },
            data6: {
                title: 'web前端',
                position: ['5%', '14%'],
                center: ['50%', '60%'],
                indicator: [
                    { text: '网页制作' },
                    { text: '前端制作工程师' },
                    { text: '网站重构工程师' },
                    { text: '前端开发工程师' },
                    { text: '前端架构师' },
                ],
                data: [
                    {
                        name: '岗位占比',
                        color: '#a77bde',
                        value: [19.5, 23.3, 5.6, 28.7, 23.3]
                    },
                ]
            },
            data7: {
                title: '测试',
                position: ['5%', '14%'],
                center: ['50%', '60%'],
                indicator: [
                    { text: '软件测试工程师' },
                    { text: '软件运维工程师' },
                    { text: '系统测试工程师' },
                    { text: '自动化测试工程师' },
                ],
                data: [
                    {
                        name: '岗位占比',
                        color: '#f83552',
                        value: [16.7, 18, 36, 12.9, 28.1]
                    },
                ]
            },
            data8: {
                title: 'USer Interface Design',
                position: ['5%', '14%'],
                center: ['50%', '60%'],
                indicator: [
                    { text: 'ui设计' },
                    { text: '网站管理' },
                    { text: '网页设计' },
                    { text: '交互平台设计' },
                    { text: 'APP移动界面设计' },
                    { text: '电子商务平台运营技术维护' },
                ],
                data: [
                    {
                        name: '岗位占比',
                        color: '#d6fc00',
                        value: [36.3, 2.4, 10.3, 13.7, 18.3, 12.5]
                    },
                ]
            },
            data9: {
                title: 'java开发薪资占比',
                data: [
                    {
                        name: '占比',
                        color: '#00CCFF',
                        value: ['1.1', '2.2', '3.2', '17.9', '18.6', '55.1'],
                    }
                ]
            },
            data10: {
                title: 'web前端开发薪资占比',
                data: [
                    {
                        name: '占比',
                        color: '#00CCFF',
                        value: ['4.5', '2.3', '9.1', '25', '9.1', '48.7'],
                    }
                ]
            },
            data11: {
                title: '软件测试',
                data: [
                    {
                        name: '占比',
                        color: '#00CCFF',
                        value: ['1.1', '6.6', '16.7', '18', '36', '21'],
                    }
                ]
            },
            data12: {
                title: 'User Interface Design',
                data: [
                    {
                        name: '占比',
                        color: '#00CCFF',
                        value: ['5', '14', '16.3', '30.5', '15.3', '16.7'],
                    }
                ]
            },
            pieData1: {// 饼图数据1
                title: "北京",
                color: '#2C7BFE',

                data: [
                    {
                        value: 60,
                        name: '天安门',
                        itemStyle: {
                            color: '#1456FE'
                        }

                    },
                    {
                        value: 20,
                        name: '故宫',
                        itemStyle: {
                            color: '#00CCFF'
                        }
                    },
                    {
                        value: 80,
                        name: '长城',
                        itemStyle: {
                            color: '#142AFE'
                        }
                    },
                    {
                        value: 40,
                        name: '前门大街',
                        itemStyle: {
                            color: '#1493FE'
                        }
                    },
                    {
                        value: 40,
                        name: '颐和园',
                        itemStyle: {
                            color: '#252448'
                        }
                    }
                ],
            },
            pieData2: {// 饼图数据1
                title: "河南",
                color: '#2C7BFE',

                data: [
                    {
                        value: 60,
                        name: '老君山',
                        itemStyle: {
                            color: '#142AFE'
                        }

                    },
                    {
                        value: 20,
                        name: '龙门石窟',
                        itemStyle: {
                            color: '#1493FE'
                        }
                    },
                    {
                        value: 80,
                        name: '清明上河园',
                        itemStyle: {
                            color: '#252448'
                        }
                    },
                    {
                        value: 40,
                        name: '少林寺',
                        itemStyle: {
                            color: '#00CCFF'
                        }
                    },
                    {
                        value: 40,
                        name: '云台山',
                        itemStyle: {
                            color: '#1456FE'
                        }
                    }
                ],
            },
            pieData3: {// 饼图数据1
                title: "陕西",
                color: '#2C7BFE',

                data: [
                    {
                        value: 60,
                        name: '大唐不夜城',
                        itemStyle: {
                            color: '#1493FE'
                        }

                    },
                    {
                        value: 20,
                        name: '华山',
                        itemStyle: {
                            color: '#142AFE'
                        }
                    },
                    {
                        value: 80,
                        name: '兵马俑',
                        itemStyle: {
                            color: '#1456FE'
                        }
                    },
                    {
                        value: 40,
                        name: '黄帝陵',
                        itemStyle: {
                            color: '#00CCFF'
                        }
                    },
                    {
                        value: 40,
                        name: '太白山',
                        itemStyle: {
                            color: '#252448'
                        }
                    }
                ],
            },
            resizeFn: null
        }
    },
    mounted() {
        this.resizeFn = this.$debounce(() => {
            // 通过捕获系统的onresize事件触发我们需要执行的事件
            this.$refs.channelBar1.setChart();
            this.$refs.distributionSolider1.setChart();
            this.$refs.channelBar2.setChart();
            this.$refs.distributionSolider2.setChart();
            //this.$refs.pies.setPies();
            this.$refs.redPocket.setPocket();
            this.$refs.webcastsRisk.setWebcasts();
            this.$refs.deviceSafeRisk.setDeviceSafe();
            this.$refs.ring1.drawRing();
            this.$refs.ring2.drawRing();
            this.$refs.ring3.drawRing();
            for (let i = 1; i < 9; i++) {
                this.$refs['chart' + i].setChart()

            }
            this.$refs.chinaMap.setMap();
            // this.$refs.hotWords.setChart();

        }, 500)
        window.addEventListener('resize', this.resizeFn)
        setTimeout(() => {
            this.musicPlay()
        }, 3000);
    },
    methods: {
        musicPlay() {
            this.$refs.MusicPlay.play()
        },
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizeFn)
    }
}
</script>

<style lang="less" scoped>
.page3 {
    height: 100%;
    width: 100%;
    padding: 14px 20px 20px;
    background: #0D2451;
    overflow: hidden;

    .ivu-col {
        height: 100%;
        float: left;
    }

    .left,
    .right1-1,
    .center-bottom {
        height: 100%;
        border: 1px solid #0D2451;
        position: relative;
        background: transparent;

        #left_5 {
            height: 100%;
            width: 45%;
            float: left;
        }

        #left_6 {
            height: 100%;
            width: 55%;
            float: left;
        }

        .circular {
            height: 100%;

            .canvas {
                height: 100%;
                width: 30%;
                float: left;

                .subtitle {
                    font-size: 12px;
                    font-weight: bold;
                    color: #fff;
                    height: 25px;
                    padding: 10px 0;
                    text-align: center;
                }

                .canvasList {
                    height: calc(~'100% - 25px');
                    text-align: center
                }
            }

            .tetx {
                height: 100%;
                width: 70%;
                float: right;
                margin-top: 30px;
                font-size: .8rem;
                color: rgb(125, 146, 22);
            }
        }

        .left1 {
            border-bottom: 1px solid #0D2451;
            background: transparent;
        }

        .title {
            position: absolute;
            display: inline-block;
            color: #6EDDF1;
            border: 2px solid #6EDDF1;
            height: 18px;
            padding: 0 2px;
            left: 50%;
            transform: translate(-50%, -50%);

            .title-text {
                position: relative;
                font-size: 16px;
                background: #09102E;
                display: inline-block;
                padding: 0 4px;
                transform: translateY(-5px);
            }
        }
    }

    .center-top {
        height: 60%;
    }

    .center-bottom {
        height: 40%;

        .bottom-radars {
            height: 55%;
        }

        .bottom-bars {
            height: 45%;
        }
    }

    .right-1 {
        height: 30%;

        .right1-1 {
            height: 92%;
        }
    }

    .right-2 {
        height: 40%;

    }
}
</style>
